<template>
  <div class="com">
    <div class="seachlist">
      <div class="listitem">
        <div class="itemname">统计时段</div>
        <el-date-picker
          v-model="value1"
          style="width:250px;"
          type="monthrange"
          range-separator="至"
          start-placeholder="开始月份"
          end-placeholder="结束月份"
        ></el-date-picker>
      </div>
      <div class="listitem">
        <div class="itemname">媒介类型</div>
        <el-select v-model="value" style="width:200px;" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>
      <div class="listitem">
        <div class="itemname">媒体</div>
        <el-select v-model="value" style="width:200px;" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>
      <div class="listitem">
        <div class="itemname">节目</div>
        <el-select v-model="value" style="width:200px;" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <el-button type="primary" icon="el-icon-search" style="margin-left:20px;">搜索</el-button>
      </div>
    </div>
    <div class="infocom">
      <div class="item">
        <chart name="one1" v-if="on1"  :data="eachermonth"></chart>
      </div>
      <div class="item">
        <chart name="one2" v-if="on2"   :data="eacher"></chart>
      </div>
    </div>
    <div class="bing1">
      <div class="bingitems">
        <chart name="one3" v-if="on" :data="bing1"></chart>
      </div>
      <div class="bingitems">
        <chart name="one4"  v-if="on" :data="bing2"></chart>
      </div>
    </div>
    <div class="bing3">
      <div class="e3bing">
        <chart name="one7" v-if="on" :data="bing3"></chart>
      </div>
      <div class="e3bing">
        <chart name="one5" v-if="on" :data="bing4" ></chart>
      </div>
      <div class="e3bing">
        <chart name="one6" v-if="on" :data="bing5"></chart>
      </div>
    </div>
    <div class="bing1" style="margin-bottom:300px;">
      <div class="bingitems">
        <chart name="one8" v-if="on" :data="bing6"></chart>
      </div>
      <div class="bingitems">
        <chart name="one9" v-if="on" :data="bing7"></chart>
      </div>
    </div>
  </div>
</template>
<script>
import chart from "./echarts";
import {getALL_kh_month,getALL_kh_add_lost,getALL_kh_bing} from '../../../api/decision.js'
export default {
  components: {
    chart
  },
  data() {
    return {
      on1:false,
      options: [
        {
          value: "选项1",
          label: "黄金糕"
        },
        {
          value: "选项2",
          label: "双皮奶"
        },
        {
          value: "选项3",
          label: "蚵仔煎"
        },
        {
          value: "选项4",
          label: "龙须面"
        },
        {
          value: "选项5",
          label: "北京烤鸭"
        }
      ],
      value: "",
      value1: "",
      //饼图
      bing: {},
      eachermonth:{},
      //折线图
     eacher:{},
     on2:false,
     on3:false,
     on:false,
     bing1:{},
     bing3:{},
     bing4:{},
     bing6:{},

     bing5:{}

    };
  },
  created() {
    // this.computedMax()
    this.getmonth()
    this.getadd_lost()
    this.getbing()
  },
  methods: {
    //
    getbing(){
getALL_kh_bing().then(res=>{
  console.log(res)
  if(res.code==200){

   //当月广告主流入流出分布(数量)
   var numobj={
        title: {
          text: "",
          left: "center"
        },
        tooltip: {
          trigger: "item",
          formatter: "{b} : {c} ({d}%)"
        },
        legend: {
          orient: "vertical",
          left: "left",
          data: []
        },
        series: [
          {
            type: "pie",
            radius: "55%",
            center: ["50%", "60%"],
            data: [
            
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      }
   numobj.title.text='当月广告主流入流出分布(数量)'
   var numobjlist=[
     {name:'新增',value:res.data.media_num.add},
     {name:'流失',value:res.data.media_num.lost},
     {name:'保有',value:res.data.media_num.has},
   ] 
   numobj.series[0].data=numobjlist
   numobj.legend.data=['新增','流失','保有']
   this.bing1=numobj



     var moneyobj={
        title: {
          text: "",
          left: "center"
        },
        tooltip: {
          trigger: "item",
          formatter: "{b} : {c} ({d}%)"
        },
        legend: {
          orient: "vertical",
          left: "left",
          data: []
        },
        series: [
          {
            type: "pie",
            radius: "55%",
            center: ["50%", "60%"],
            data: [],
        
          }
        ]
      }
   moneyobj.title.text='当月广告主流入流出分布(金额)'
   var moneyobjlist=[
     {name:'新增',value:res.data.media_money.add},
     {name:'流失',value:res.data.media_money.lost},
     {name:'保有',value:res.data.media_money.has}
   ] 
   moneyobj.series[0].data=[]
   moneyobj.series[0].data=moneyobjlist
   moneyobj.legend.data=['新增','流失','保有']
   this.bing2=moneyobj
  console.log(this.bing2)
   //当月新增广告主类型分布
    var monthadd={
        title: {
          text: "",
          left: "center"
        },
        tooltip: {
          trigger: "item",
          formatter: "{b} : {c} ({d}%)"
        },
        legend: {
          orient: "vertical",
          left: "left",
          data: []
        },
        series: [
          {
            type: "pie",
            radius: "55%",
            center: ["50%", "60%"],
            data: [],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      }
 monthadd.title.text='当月新增广告主类型分布'
  
  res.data.media_add_data.forEach(element => {
     monthadd.legend.data.push(element.get_industry.name)
      monthadd.series[0].data.push({value:element.count,name:element.get_industry.name})
  });
   this.bing3=monthadd
  
  var monthlost={
        title: {
          text: "",
          left: "center"
        },
        tooltip: {
          trigger: "item",
          formatter: "{b} : {c} ({d}%)"
        },
        legend: {
          orient: "vertical",
          left: "left",
          data: []
        },
        series: [
          {
            type: "pie",
            radius: "55%",
            center: ["50%", "60%"],
            data: [],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      }
  monthlost.title.text='当月流失广告主类型分布'
  
  res.data.media_lost_data.forEach(element => {
     monthlost.legend.data.push(element.get_industry.name)
      monthlost.series[0].data.push({value:element.count,name:element.get_industry.name})
  });
   this.bing4=monthlost

///当月保有广告主类型分布
var monthhas={
        title: {
          text: "",
          left: "center"
        },
        tooltip: {
          trigger: "item",
          formatter: "{b} : {c} ({d}%)"
        },
        legend: {
          orient: "vertical",
          left: "left",
          data: []
        },
        series: [
          {
            type: "pie",
            radius: "55%",
            center: ["50%", "60%"],
            data: [],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      }
     monthhas.title.text='当月保有广告主类型分布'
  
  res.data.media_other_data.forEach(element => {
     monthhas.legend.data.push(element.get_industry.name)
      monthhas.series[0].data.push({value:element.count,name:element.get_industry.name})
  });
   this.bing5=monthhas  
   var media_industry={
        title: {
          text: "",
          left: "center"
        },
        tooltip: {
          trigger: "item",
          formatter: "{b} : {c} ({d}%)"
        },
        legend: {
          orient: "vertical",
          left: "left",
          data: []
        },
        series: [
          {
            type: "pie",
            radius: "55%",
            center: ["50%", "60%"],
            data: [],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      }
     monthhas.title.text='广告主行业分布'
  
  res.data.media_industry_data.forEach(element => {
     media_industry.legend.data.push(element.get_industry.name)
      media_industry.series[0].data.push({value:element.count,name:element.get_industry.name})
  });
   this.bing6=media_industry  
    var media_data={
        title: {
          text: "",
          left: "center"
        },
        tooltip: {
          trigger: "item",
          formatter: "{b} : {c} ({d}%)"
        },
        legend: {
          orient: "vertical",
          left: "left",
          data: []
        },
        series: [
          {
            type: "pie",
            radius: "55%",
            center: ["50%", "60%"],
            data: [],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      }
     media_data.title.text='广告主分布'
  
  res.data.media_data.forEach(element => {
     media_data.legend.data.push(element.get_industry.name)
      media_data.series[0].data.push({value:element.count,name:element.get_industry.name})
  });
   this.bing7=media_data
   this.on=true
  //  for (const key in res.data.media_num) {
  //    if (res.data.media_num.hasOwnProperty(key)) {
  //      const element = res.data.media_num[key];
       
  //    }
  //  }
  }
})
    },
    //getaddan
    getadd_lost(){
      var obj={
        title: {
          text: "客户新增/流失比分析"
        },
        tooltip: {
          trigger: "axis"
        },
        legend: {
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: []
        },
        yAxis: {
          type:'value',

        },
        series: [
          {
            type: "line",
            data: []
          }
        
        ]
      }
   getALL_kh_add_lost().then(res=>{
        if(res.code==200){
          var title=[]
          var data=[]
          for (const key in res.data) {
            if (res.data.hasOwnProperty(key)) {
              const element = res.data[key];
              obj.xAxis.data.push(key)
              obj.series[0].data.push(element.point)
            }
          }
      this.eacher=obj
      this.on2=true
        }
   })
    },
    //获取月度流入流出
    getmonth(){
    getALL_kh_month().then(res=>{
      if(res.code==200){
        var obj={
        title: {
          text: "客户月度流入流出关系图"
        },
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: ["流入", "流出"]
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: []
        },
        yAxis: [
          { name: "流失量(个)", type: "value", max: 350, min: 0, },
          { name: "新增量(个)", type: "value", inverse: true, max: 350, min: 0,  nameLocation:'start'}
        ],
        series: [
          {
            name: "流出",
            type: "line",
            areaStyle: {
              normal: {
                color: "#0080ff" //改变区域颜色
              }
            },
            data: []
          },
          {
            name: "流入",
            type: "line",
            areaStyle: {
              normal: {
                color: "#091e3b" //改变区域颜色
              }
            },
            yAxisIndex: 1,
            data: []
          }
        ]
      }
        var title=[]
        var add=[]
        var lost=[]
        for (const key in res.data) {
          if (res.data.hasOwnProperty(key)) {
            const element = res.data[key];
            title.push(key)
            add.push(element.add)
            lost.push(element.lost)
          }
        }
        obj.xAxis.data=title
        obj.yAxis[0].max=this.computedMax(add.concat(lost))
        obj.yAxis[1].max=this.computedMax(add.concat(lost))
        obj.series[0].data=lost
        obj.series[1].data=add
        this.eachermonth=obj
        this.on1=true
      }
    })
    },

    computedMax(arr){
    var max = arr[0];
    var len = arr.length; 
    for (var i = 1; i < len; i++){ 
    if (arr[i] > max) { 
    max = arr[i]; 
    } 
    } 
    
    max=Math.ceil(max/100)*100
    
    return max;
    },
  },
};
</script>
<style lang="scss" scoped>
.seachlist {
  width: 97%;

  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  margin-top: 20px;
  .listitem {
    width: 50%;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    .itemname {
      width: 100px;
    }
  }
}
.infocom {
  width: 100%;
}
.item {
  width: 90%;
  height: 350px;
  // background: red;
  margin: 0 auto;
  margin-top: 20px;
  margin-bottom: 20px;
}
.bing1 {
  width: 100%;
  height: 350px;
  display: flex;
  margin-top: 20px;
  .bingitems {
    height: 100%;
    width: 50%;
  }
}
.bing3 {
  width: 100%;
  height: 350px;
  display: flex;
  .e3bing {
    width: 33%;
    height: 100%;
  }
}
</style>